<template>
    <div class="news-detail">
        <div class="header">
            <span class="title1 txt-theme">新闻详情</span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item class="list-tit" to="/news/newsLists"
                    >新闻列表</el-breadcrumb-item
                >
                <el-breadcrumb-item>新闻详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="article" v-if="newsDetail.now">
            <div class="title">{{ newsDetail.now.name }}</div>
            <div class="date">
                {{ $format(newsDetail.now.date, 'yyyy-MM-dd') }}
            </div>
            <div class="body" v-html="newsDetail.now.content"></div>
            <div class="related">
                <div
                    class="prev"
                    v-if="newsDetail.last"
                    @click="getNewsDetail(newsDetail.last.uids)"
                >
                    上一篇：<span>{{ newsDetail.last.name }}</span>
                </div>
                <div
                    class="next"
                    v-if="newsDetail.next"
                    @click="getNewsDetail(newsDetail.next.uids)"
                >
                    下一篇：<span>{{ newsDetail.next.name }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id: '',
                newsDetail: {},
            }
        },
        methods: {
            getNewsDetail(id) {
                let dataMsg = {
                    uids: id,
                    type: '',
                }
                this.$http
                    .getNewsDetail({ dataMsg: JSON.stringify(dataMsg) })
                    .then((res) => {
                        if (res.success) {
                            console.log(res)
                            this.newsDetail = res.data
                            this.newsDetail.now.content = this.newsDetail.now.content.replace(
                                /\/oss\/filemag/g,
                                this.$store.getters.imgUrl + '/oss/filemag'
                            )
                        }
                    })
                    .catch((err) => {
                        this.$msgAlert(err)
                    })
            },
        },
        mounted() {
            this.id = this.$route.params.id
            this.getNewsDetail(this.id)
        },
        activated() {
            this.id = this.$route.params.id
            this.getNewsDetail(this.id)
        },
    }
</script>

<style>
    .news-detail {
        color: #333;
        margin: 30px 0 60px;
    }
    .news-detail .header {
        display: flex;
        justify-content: space-between;
        padding-bottom: 30px;
        border-bottom: 2px solid #5095f7;
    }
    .news-detail .header .title1 {
        font-size: 22px;
        font-weight: bold;
        line-height: 24px;
    }
    .news-detail .article {
        font-size: 16px;
        color: #333;
        line-height: 24px;
        text-align: justify;
    }
    .news-detail .article .title {
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        margin-top: 60px;
    }
    .news-detail .article .date {
        font-weight: 400;
        text-align: center;
        margin: 20px 0 35px;
    }
    .news-detail .body img {
        max-width: 100%;
    }
    /* .news-detail .body h2 {
                                                                                                                                font-weight: bold;
                                                                                                                            }
                                                                                                                            .news-detail .body p {
                                                                                                                                margin: 20px 0;
                                                                                                                            } */
    .news-detail .related {
        margin-top: 60px;
    }
    .news-detail .related span {
        cursor: pointer;
    }
    .news-detail .related span:hover {
        color: #5095f7;
    }
</style>